

<template>
    <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center custom-class="RegularPop"
        :close-on-click-modal="false" @close="cancel">
        <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
            <h1>基础信息</h1>
            <el-row>
                <el-col>
                    <el-form-item label="套餐名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入套餐" clearable />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="套餐类型" prop="type">
                        <el-radio-group v-model="form.type" @change="typeChange">
                            <el-radio v-for="dict in combo_type" :key="dict.value" :label="dict.value"
                                :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计费模式" prop="billingModel">
                        <el-radio-group v-model="form.billingModel" @change="billingModelChange">
                            <el-radio v-for="dict in combo_billing_model" :key="dict.value" :label="dict.value"
                                :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                        <el-tooltip class="box-item" effect="dark" placement="top">
                            <template #content> 按用户数计费：根据实际开通的账号数量收费；<br />总价=用户数*价格；<br /> 统一计费：按固定价格收费</template>
                            <i class="tips">?</i>
                        </el-tooltip>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户数量" class="userCounts">
                        <el-input placeholder="输入数字" v-model="form.userCountMax" clearable
                            oninput="value=value.replace(/[^0-9.]/g,'')" />
                        <span> - </span>
                        <el-input placeholder="输入数字" v-model="form.userCountMin" clearable
                            oninput="value=value.replace(/[^0-9.]/g,'')" />
                        <span>人</span>
                        <el-tooltip class="box-item" effect="dark" content="两端包含，不填写则表示无人数限制，租户可任意创建用户"
                            placement="right">
                            <i class="tips">?</i>
                        </el-tooltip>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="费用" prop="cost" class="costs">
                        <el-input placeholder="输入数字" v-model="form.cost" clearable
                            oninput="value=value.replace(/[^0-9.]/g,'')" />
                        <span>/年起</span>
                    </el-form-item>

                </el-col>

            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status" @change="statusChange">
                            <el-radio v-for="dict in comboStatus" :key="dict.value" :label="dict.value"
                                :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="缴费方式">
                        <el-radio-group v-model="form.paymentMethod" @change="paymentMethodChange">
                            <el-radio v-for="dict in payment_method" :key="dict.value" :label="dict.value"
                                :value="dict.value">
                                {{ dict.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="套餐介绍" class="describe">
                    <el-input v-model="form.introduce" type="textarea" placeholder="100字以内" maxlength="100" />
                </el-form-item>

            </el-row>
            <h1>套餐内容</h1>
            <el-form-item class="Combo-container">
                <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选
                </el-checkbox>
                <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
                </el-checkbox>
                <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id"
                    :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
                    @check-change="getMenuAllCheckedKeys">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">

                            <span class="serviceName">{{ node.label }}</span>
                            <span class="zyTypesM" :type="data.menuType" v-if="data.menuType == 'M'">

                                <a> 模块</a>

                            </span>
                            <span class="zyTypesC" :type="data.menuType" v-if="data.menuType == 'C'">

                                <a> 菜单</a>

                            </span>
                            <span class="zyTypesF" :type="data.menuType" v-if="data.menuType == 'F'">

                                <a> 功能</a>

                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">返回</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { addCombo, updateCombo, tenantTreeSelect } from '@/api/tenant/combo'
import { treeselect as menuTreeselect } from "@/api/system/menu";
const { proxy } = getCurrentInstance();
const { combo_billing_model, combo_type, tenant_combo_status, payment_method } = proxy.useDict("combo_billing_model", "combo_type", "tenant_combo_status", "payment_method");
const title = ref('')
const visible = ref(false);
const areaCode = ref('')
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const openDataScope = ref(false);
const menuRef = ref(null);

const data = reactive({
    form: {
        menuCheckStrictly: false,
        menuIds: [],

    },
    comboStatus: [{ label: '启用', value: '1' }, { label: '停用', value: '0' }],
    queryParams: {},
    rules: {
        name: [{ required: true, message: "套餐名称不能为空", trigger: "blur" }],
        type: [{ required: true, message: "套餐类型不能为空", trigger: 'change' }],
        billingModel: [{ required: true, message: "计费模式不能为空", trigger: 'change' }],
        cost: [{ required: true, message: "费用不能为空", trigger: "blur" }]
    },
});

const { queryParams, form, rules, comboStatus } = toRefs(data);
/** 取消按钮 */
function cancel() {
    reset();
    visible.value = false;

};
/** 重置操作表单 */
function reset() {
    if (menuRef.value != undefined) {
        menuRef.value.setCheckedKeys([]);
    }
    menuExpand.value = false;
    menuNodeAll.value = false;
    form.value = {
        menuIds: [],
        menuCheckStrictly: false,
        paymentMethod: '0',
        status: '1',
        type: undefined,
        billingModel: undefined,
        content: undefined,
        menuIds: []
    };
    proxy.resetForm("ruleFormRef");
}
// 显示弹框
function add() {
    reset();
    getMenuTreeselect()
    visible.value = true;
    title.value = "新增套餐";
    form.value.menuCheckStrictly = true
}
//修改
function edit(row) {
    reset();
    getMenuTreeselect()
    visible.value = true;
    title.value = "修改套餐";
    form.value = Object.assign({}, row);
    form.value.status = row.status + '';
    form.value.type = row.type + '';
    form.value.billingModel = row.billingModel + '';
    form.value.menuCheckStrictly = false
    form.value.content = JSON.parse(row.content)
    let checkedKeys = form.value.content;
    // console.log('修改', checkedKeys)
    nextTick(() => {
        proxy.$refs.menuRef.setCheckedKeys(checkedKeys)
    });


}
/** 查询菜单树结构 */
function getMenuTreeselect() {
    tenantTreeSelect().then(response => {
        //   console.log('树形菜单', response)
        menuOptions.value = response.data;

    });
}
/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value, type) {
    if (type == "menu") {
        let treeList = menuOptions.value;
        for (let i = 0; i < treeList.length; i++) {
            menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
        }
    }
}
/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value, type) {
    if (type == "menu") {
        menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
    }
}
/** 树权限（父子联动） */
function handleCheckedTreeConnect(value, type) {
    if (type == "menu") {
        form.value.menuCheckStrictly = value ? true : false;

    }
}

/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
    // 目前被选中的菜单节点
    let checkedKeys = menuRef.value.getCheckedKeys();
    // 半选中的菜单节点
    let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
    //  console.log('选中的菜单节点', checkedKeys)
    return checkedKeys;
}
function statusChange(val) {
    console.log('zhuantai', val)
}
function paymentMethodChange(val) {
    console.log('zhifu', val)
}
function typeChange(val) {
    console.log('套餐类型', val)
}
function billingModelChange() {

}
//提交
function submitForm() {
    proxy.$refs['ruleFormRef'].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                form.value.content = JSON.stringify(getMenuAllCheckedKeys());
                //  console.log('form.value.content', form.value.content)
                updateCombo(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    visible.value = false;
                    proxy.$emit('refresh')
                }).catch(err => {
                    console.log('err', err)
                })
            } else {
                form.value.content = JSON.stringify(getMenuAllCheckedKeys());
                addCombo(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    visible.value = false;
                    proxy.$emit('refresh')
                })
            }
        } else {
            proxy.$modal.msgError("提交失败！");
            return false;
        }
    })
}

defineExpose({
    add, edit
});
//getTypeData()
</script>
<style lang="scss">
.Combo-container {
    .el-tree-node {
        position: relative;

        .el-tree-node__content {
            position: relative;

            span.zyTypesM {
                position: absolute;
                right: 40%;
            }

            span.zyTypesC {
                position: absolute;
                right: 40%;
            }

            span.zyTypesF {
                position: absolute;
                right: 40%;
            }
        }
    }
}

.el-form-item.userCounts {
    span {
        padding: 0 10px;
    }

    .el-input {
        width: 114px !important;

        input.el-input__inner {
            width: 100% !important;
        }
    }

}

.el-form-item {
    i.tips {
        color: #333;
        width: 16px;
        height: 16px;
        border-radius: 40px;
        border: 1px solid #333333;
        line-height: 16px;
        font-size: 12px;
        text-align: center;
        font-style: normal;
        font-family: "HarmonyOS_Sans";
        cursor: pointer;
        margin-left: 4px;
    }

    .el-radio__label {
        color: #333;
        font-weight: 500;
    }

}

.el-form-item.costs {
    .el-form-item__content {
        input.el-input__inner {
            width: 95%;
        }

        .el-input {
            width: 256px;
        }
    }
}
</style>
